<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<head>
<title>话题线|北京时间</title>
<script type="text/javascript" src="${baseurl}resource/js/WeiboUtility.js" ></script>
<script src='${baseurl}dwr/interface/ourdiaryDwr.js'></script>
<script src='${baseurl}dwr/engine.js'></script>
<script src='${baseurl}dwr/util.js'></script>
<style type="text/css">
.diary {
	padding: 3px;
	border: 1px solid #ddd;
	position: inherit;
	
}
</style>
<script type="text/javascript">
function detail(mid, a){
a.href+=WeiboUtility.mid2url(mid);
}

function publish(){
	if(isEmpty(document.getElementsByName("statuses")[0].value)){
		return;
	}
	document.getElementById("publishForm").submit();
}

function followTrend(){
	if(isEmpty(document.getElementsByName("trend")[0].value)){
		return;
	}
	document.getElementById("followTrendForm").submit();
}

function unfollowTrend(trendId){
	ourdiaryDwr.unfollowTrend(trendId,function (result){
			if(isEmpty(result)){
				$("#tid"+trendId).remove();
			} else {
				alert(result);
			}
		});

}

window.onload=init;
function init(){
	<c:if test="${not empty msg}">
		alert("${msg}");
	</c:if>
}

function countChar1(val){
    var len = val.value.length;
    if (len >= 140) {
        val.value = val.value.substring(0, 140);
    }else {
    	var $counter = 140 - len;
        $('#charNum1').text('还可以输入'+$counter+'字');
    	
    }
};
function countChar2(val){
    var len = val.value.length;
    if (len >= 140) {
        val.value = val.value.substring(0, 140);
    }else {
    	var $counter = 140 - len;
    	$('#charNum2').text('还可以输入'+$counter+'字');
    }
};
</script>
</head>

<body>

	<div id="container_weibo">
	<div class="weibo_left">
	
	<!-- 话题列表 -->
		<div class="trend_list">
		<div style="width:200px;background:#000;color:#fff;text-align:center;"><span>您关注的话题</span></div>
			<c:if test="${not empty trends}">
				<c:forEach items="${trends}" var="it" varStatus="s">
					<li id="tid${it.trendId}">
					<a href="./line.html?trend=" onclick="encodeZH(this)"><c:out value="${it.hotword}" /></a>&nbsp; 
					<a href="javascript:unfollowTrend(${it.trendId})"><span class="dismiss">X 取消</span></a>
					</li>
				</c:forEach>
			</c:if>

			<c:if test="${empty trend}">
				没有话题
			</c:if>
			<br>
			<a href="./trendsAndFriends.html">看看朋友们关注了哪些话题</a>
			<div class="clear"></div>
		</div>
	
		<!-- 朋友列表 -->
		<div style="width:200px;background:#000;color:#fff;"><span>当前话题参与者</span></div>
		<div class="friends_list">
			<c:if test="${not empty paticipators}">
				<c:forEach items="${paticipators}" var="it" varStatus="s">
					<li>
						<img src="${it.profileImageUrl}" /><p>${it.screenName}</p>
					</li>
				</c:forEach>
			</c:if>
			<div class="clear"></div>
		</div>
		
		<div class="list_more">查看更多</div>
		<div class="clear"></div>
</div>


<div class="weibo_right">
		<!-- 内容 -->
 <div id="diary">
    
       <div class="timeline_container">
            <div class="timeline">
                <div class="plus"></div>
            </div>
        </div>
        <div class="item">
        	<ul id="submit_trend" class="submit_trend" >
        		<li class="active"><a href="#reply_trend">参与话题</a></li>
				<li><a href="#new_trend">新话题</a></li>
        	</ul>
        	<a class="refresh_btn" href="./refresh.html?redirect=line">刷新</a>
        	<div id="reply_trend" class="content">
			<form action="./ourdiary.html?method.publish=" method="post"  id="publishForm">
			<div id="charNum1"></div>
				<textarea rows="4" cols="48" name="statuses" onkeyup="countChar1(this)">#${trend}#</textarea><br/>
				<input type="button" value="参与话题" onclick="publish()" />
			</form>
		</div>

		<div id="new_trend" class="content">
			<form action="./ourdiary.html?method.followTrend=" method="post" id="followTrendForm">
				<input type="text" name="trend" />
				<input type="button" value="关注" onclick="followTrend()" />
			</form>
		</div>
	      
        </div>
		<c:forEach items="${line}" var="it" varStatus="s">
		  <div class="item ">
		  		<div>
		  			<div class="avatar"><a href="http://weibo.com/${it.id}">
						<img src="${it.profileImageUrl}" /></a></div>
						<div class="weibo_name">用户名:<a href="http://weibo.com/${it.id}">${it.screenName}</a></div>
					
					<div class="weibo_content"><a href="http://weibo.com/${it.id}/" onclick="detail('${it.mid}', this)" target="blank">
						<br><fmt:formatDate value="${it.createdAt}" pattern="yyyy/MM/dd hh:mm:ss" /><br>${it.text}
					</a>
					</div>
					<!-- <div class="weibo_function">评论 | 转发 </div> -->	  
				</div>
		  	</div>
		</c:forEach>
	  
	 	<div id="popup" class='shade'>
	 		
			<div class="Popup_rightCorner" >	</div>
			<div id='box'>
				<b>参与话题</b><br/>
				<form action="./ourdiary.html?method.publish=" method="post"  id="publishForm">
				<div id="charNum2"></div>
				<textarea rows="4" cols="35" name="statuses" onkeyup="countChar2(this);">#${trend}#</textarea><br/>
				<input type="button" value="参与话题" onclick="publish()" id='update_button'  />
				</form>
				
	        </div>
		</div>
	</div>
	
	</div>	
	<div class="clear"></div>
	</div>

<script>
$(function(){


function Arrow_Points()
{ 
var s = $('#diary').find('.item');
$.each(s,function(i,obj){
var posLeft = $(obj).css("left");
$(obj).addClass('borderclass');
if(posLeft == "0px")
{
html = "<span class='rightCorner'></span>";
$(obj).prepend(html);			
}
else
{
html = "<span class='leftCorner'></span>";
$(obj).prepend(html);
}
});
}

$('.timeline_container').mousemove(function(e)
{
var topdiv=$("#containertop").height();
var pag= e.pageY - topdiv-218;
$('.plus').css({"top":pag +"px", "background":"url('${baseurl}resource/imgs/ourdiary/plus.png')","margin-left":"1px"});}).
mouseout(function()
{
$('.plus').css({"background":"url('')"});
});
	
	
				
$("#update_button").live('click',function()
{
var x=$("#update").val();
$("#container").prepend('<div class="item"><a href="#" class="deletebox">X</a><div>'+x+'</div></div>');

//Reload masonry
$('#diary').masonry( 'reload' );

$('.rightCorner').hide();
$('.leftCorner').hide();
Arrow_Points();

$("#update").val('');
$("#popup").hide();
return false;
});

// Divs
$('#diary').masonry({itemSelector : '.item'});
Arrow_Points();
  
//Mouseup textarea false
$("#popup").mouseup(function() 
{
return false;
});
  
$(".timeline_container").click(function(e)
{
var topdiv=$("#diarytop").height();
$("#popup").css({'top':(e.pageY-topdiv-238)+'px'});
$("#popup").fadeIn();
$("#update").focus();

	
});  


$(".deletebox").live('click',function()
{
if(confirm("Are your sure?"))
{
$(this).parent().fadeOut('slow');  
//Remove item
$('#diary').masonry( 'remove', $(this).parent() );
//Reload masonry
$('#diary').masonry( 'reload' );
$('.rightCorner').hide();
$('.leftCorner').hide();
Arrow_Points();
}
return false;
});



//Textarea without editing.
$(document).mouseup(function()
{
$('#popup').hide();

});
 
  
});
</script>


	
</body>
